<template>
	<view>
		<!-- 返回主页 -->
		<view class="back" @click="back">
			<view class="backicon"></view>
		</view>
		<uni-forms-item label="日期:" required>
			<picker mode="date" fields="day" @change="bindDateChange" start="2023-01-01" end="2030-12-31"
				:value="nowaday">
				<input class="pickerclass" v-model="date" placeholder="请选择具体月份" disabled="true" />
			</picker>
		</uni-forms-item>

		<view  v-if="status">
		<view class="info">
			<view class="top">
				<text style="margin-left: 40rpx;">老师姓名</text>
				<text style="margin-left: 90rpx;">迟到日期</text>
				<text style="margin-left: 100rpx;">课程名</text>
			</view>
			<u-list height="1000rpx">
				<u-list-item v-for="i in user" :key="i">
					<view class="Oneinfo" @click="show = true,
						stuname=i.sname,teachername=i.nickname,
						time=i.delaydate,classname=i.coursename,
						classinfo=i.remarks">
						<view class="lengthcon">
							<text>{{i.nickname}}</text>
						</view>
						<view class="lengthcon" style="width: 200rpx;">
							<text>{{i.delaydate}}</text>
						</view>
						<view class="lengthcon">
							<text>{{i.coursename}}</text>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<view >
		<text @click="upPage"
			style="margin-left: 50rpx;position: absolute;font-size: 35rpx;margin-top: 50rpx;font-weight: 600;">上一页</text>
		<text
			style="margin-left: 28%; position: absolute;font-size: 35rpx;margin-top: 50rpx;font-weight: 600;">第{{page}}页</text>
		<text
			style="margin-left: 53%; position: absolute;font-size: 35rpx;margin-top: 50rpx;font-weight: 600;">共{{pagetotal}}页</text>
		<text @click="downPage"
			style="margin-left: 78%; position: absolute;font-size: 35rpx;margin-top: 50rpx;font-weight: 600;">下一页</text>
		</view>
		</view>
		<view v-else>
		<u-empty
		        mode="data"
		        icon="http://cdn.uviewui.com/uview/empty/data.png"
		>
		</u-empty>
		</view>
		<u-popup :show="show" :round="20" mode="bottom" closeable @close="close" @open="open">
			<view style="height: 550rpx;">
				<view class="showdt" style="margin-top: 70rpx;">
					<text>学生姓名:</text><text style="margin-left: 40rpx;">{{stuname}}</text>
				</view>
				<view class="showdt">
					<text>老师姓名:</text><text style="margin-left: 40rpx;">{{teachername}}</text>
				</view>
				<view class="showdt">
					<text>上课时间:</text><text style="margin-left: 40rpx;">{{time}}</text>
				</view>
				<view class="showdt">
					<text>课程名称:</text><text style="margin-left: 40rpx;">{{classname}}</text>
				</view>
				<view class="showdt">
					<text>详细信息:</text><text style="margin-left: 40rpx;">{{classinfo}}</text>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import {
		vShow
	} from "vue";
	import {
		HNIT_URL
	} from '../../../constants';
	export default {
		data() {
			return {
				user: [],
				stuname: "",
				teachername: "",
				time: "",
				classname: "",
				classinfo: "",
				status: true,
				show: false,
				date: "", //选中的年月
				page: 1,
				total: 0,
				nowaday: "",
				pagetotal:0
			};
		},

		//值监听，如果变化就执行方法
		watch: {
			date(newVal) {
				if (newVal) {
					this.query()
					this.queryTotal();
				}
			}
		},
		methods: {
			close() {
				this.show = false
			},
			open() {},
			// 返回上一页
			back() {
				uni.reLaunch({
					url: '/pages/manage/home/index'
				});
			},
			//查询教师迟到信息
			query() {
				let params = {
					date: this.date,
					page: this.page
				}
				this.$request.post(HNIT_URL + "wx/managerquery", params).then(res => {
					this.user = res.data
					if (this.user.length == 0) {
						this.status = false
					} else {
						this.status = true
					}
				})
			},
			//查询数据总数
			queryTotal() {
				let params = {
					date: this.date
				}
				this.$request.post(HNIT_URL + "wx/querytotal", params).then(res => {
					this.total = res.data
					this.pagetotal=Math.ceil(res.data/ 2)
				})
			},
			upPage() {
				if (this.page == 1) {
					uni.showToast({
						title: "已经是第一页啦",
						icon: "none",
						duration: 2000
					})
				} else {
					this.page--;
					this.query();

				}
			},
			downPage() {
				this.page++;
				var num = Math.ceil(this.total / 2)
				if (this.page > num) {
					uni.showToast({
						title: "已经是最后一页啦",
						duration: 3000,
						icon: "none"
					})
					this.page--;
				} else {
					this.query();
				}

			},
			bindDateChange(value) {
				this.date = value.detail.value;
			},
		},
		onLoad() {
			this.date = new Date().toISOString().slice(0, 10)
			this.query()
			this.queryTotal();
		}
	}
</script>

<style lang="scss">
	.showdt {
		font-weight: bold;
		margin-top: 40rpx;
		margin-left: 40rpx;
		font-size: 35rpx;
	}

	.lengthcon {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		float: left;
		width: 180rpx;
		margin-left: 30rpx;
	}

	.Oneinfo {
		margin-top: 30rpx;
		margin-left: 40rpx;
		width: 90%;
		background-color: white;
		height: 100rpx;
		line-height: 100rpx;
		font-weight: bold;
		border-radius: 40rpx;
	}

	.top {
		color: #555555;
		font-size: 35rpx;
		width: 90%;
		background-color: white;
		height: 100rpx;
		line-height: 100rpx;
		font-weight: bold;
		border-radius: 40rpx;
	}

	.backicon {
		background-image: url("data:image/svg+xml,%3Csvg t='1689146294791' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='19508' width='200' height='200'%3E%3Cpath d='M501.30944 464.22016c0-19.99872-16-35.19488-35.99872-35.99872H310.4V350.62784L137.61536 464.22016l171.98592 113.59232V500.21888h155.70944c19.99872-0.79872 35.99872-16 35.99872-35.99872z' fill='%23005CFF' p-id='19509'%3E%3C/path%3E%3Cpath d='M886.38464 212.01408c0-39.46496-31.99488-71.45984-71.45984-71.45984H443.88864c-39.46496 0-71.45984 31.99488-71.45984 71.45984v117.69856a29.42464 29.42464 0 1 0 58.84928 0V225.00352a25.6 25.6 0 0 1 25.6-25.6h358.05184c2.72384 0 5.23264 0.88576 7.296 2.3552l-252.50816 91.904c-15.872 5.77536-28.74368 29.28128-28.74368 52.49536v382.88384H456.87808a25.6 25.6 0 0 1-25.6-25.6V598.7328a29.42464 29.42464 0 1 0-58.84928 0v117.69856c0 39.46496 31.99488 71.45984 71.45984 71.45984h97.08544v62.68928c0 23.21408 12.86656 37.3504 28.74368 31.57504l287.42144-104.61184c15.872-5.77536 28.74368-29.28128 28.74368-52.49536v-0.39424c0.3072-2.69824 0.50688-5.43232 0.50688-8.2176v-504.4224z' fill='%23005CFF' p-id='19510'%3E%3C/path%3E%3C/svg%3E");
		background-size: cover;
		width: 50rpx;
		height: 50rpx;
		margin-top: 6rpx;
		margin-left: 12rpx;
	}

	.back {
		position: fixed;
		width: 80rpx;
		margin-top: -70rpx;
		height: 55rpx;
		margin-left: 20rpx;
		border-radius: 80rpx;
		background-color: white;
		border: 1rpx #c6c6c6 solid;
	}

	.info {
		margin-top: 160rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.uni-forms-item__label.forms-item--uni-forms-item__label {
		color: black;
		font-size: 35rpx;
		font-weight: 600;
	}

	.is-direction-left {
		margin-top: 200rpx;
		margin-left: 60rpx;
	}

	.info {
		margin-top: 0rpx;
	}

	Input.pickerclass {
		font-size: 30rpx;
		font-weight: 600;
		margin-top: 16rpx;
	}



	page {
		background-color: #eeeeee;
	}
</style>